<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>摩天轮</title>
		<style>
			.div1{
				
				width: 500px;
				height: 500px;
				margin: 0 auto;/* 边框0：不显示 */
				animation: name 1000s;/* 运行时间 */
				animation-timing-function: 100;
				position: relative;/* 相对定位 */
			}
			@keyframes name{
			    from{transform: rotate(0deg);/* 旋转起点0度 */
				
				}
			    to{transform: rotate(3600deg);/* 旋转重点360度 */
				
				}
			}
			 
			 img:nth-child(2){
				 position: absolute;
				 left: 80px;
				 top: 30px;
				 animation: nae 1000s;/* 运行时间 */
				 animation-timing-function: 100;
			 }
			 
			 @keyframes nae{
			     from{transform: rotate(0deg);/* 旋转起点0度 */
			 	
			 	}
			     to{transform: rotate(-3600deg);/* 旋转重点360度 */
			 	
			 	}
			 }
			 
			 img:nth-child(3){
			 	position: absolute;
			 	right: 10px;
			 	top: 150px;
				animation: nae 1000s;/* 运行时间 */
				animation-timing-function: 100;
			 }
			 
			
			 
			 img:nth-child(4){
			 	position: absolute;
			 	left: 70px;
			 	bottom: 60px;
				animation: nae 1000s;/* 运行时间 */
				animation-timing-function: 100;
			 }
			
			
			
			
		</style>
	</head>
	<body>
		<div class="div1">
			<img src="../img/fsw.png" width="500px" height="500px"/>
			<img src="../img/boy.png" width="80px" height="100px"/>
			<img src="../img/girl.png" width="80px" height="100px"/>
			<img src="../img/shamegirl.png" width="80px" height="100px"/>
		</div>
		
		
		
	</body>
</html>
